<template>
	<view class="">
		<dsl-navbar title="区代理收入统计" bgTopImg="white" isBack=""></dsl-navbar>
		<view class="padding solid-bottom align-center">
			时间筛选：
			<picker mode="date" :range="date" @change="timeMen">
				<view>{{date}}</view>
			</picker>
		</view>
		<view class="align-center rowsa padding">
			<view>总收入</view>
			<view class=" ">￥{{ totalAmount|| '0.00'}}</view>
		</view>
		<view v-if="captainList &&captainList.length !=0">
			<view v-for="(item,index) in captainList" :key='item.id'>
				<view class="tuanzhang-box row">
					<image style="max-width: 200rpx;height: 200rpx;" src="" mode="aspectFill" class="bg-gray">
					</image>
					<view class="width-100 ml25 crowjb" style="height: 180rpx;">
						<view class="rowjbic">
							<view class="fs30 c333">{{item.name ||'暂无'}}</view>
							<!-- <radio style="transform: scale(0.7);" /> -->
						</view>
						<view class="fs28 c888">金额：￥{{item.amount || 0}}</view>
						<view class="rowic">
							<image style="width: 20rpx;height: 20rpx;" src="/static/img/icon_weizhi.png" mode="">
							</image>
							<view class="fs24 ml20 c999">{{item.location ||'暂无'}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<moreLoading title='暂无更多团长'></moreLoading>
		</view>
	</view>
</template>

<script>
	var util = require('../../../../common/util.js');
	var time = util.formatTime(new Date());
	import {
		getturnover
	} from '../../../../common/path.js'
	export default {
		data() {
			return {
				date: time,
				captainList: [], //团长列表
				totalAmount: 0, //总收入
			}
		},
		//生命周期函数
		onReady() {},
		onLoad() {
			console.log('[当前系统时间]', this.date);
			this.getturnover()
		},
		onShow() {},
		methods: {
			//时间筛选
			timeMen(event) {
				console.log('[时间选择]', event);
				this.date = event.detail.value
				this.getturnover()
			},
			//代理收入统计
			getturnover() {
				let _this = this
				let data = {
					userId: uni.getStorageSync('userInfo').id,
					dateTime: this.date + ' 00:00:00',
				}
				this.Http.POST(getturnover, data)
					.then((res) => {
						console.log('[收入统计]', res);
						if (res.code == 0) {
							this.totalAmount = res.data.totalAmount
							this.captainList = res.data.captainList
						} else {
							uni.showModal({
								title: '温馨提示',
								content: res.msg,
								success: function(Res) {
									if (Res.confirm) {
										_this.$tools.back()
									} else if (Res.cancel) {
										_this.$tools.back()
									}
								}
							})
						}
					})
			}
		},
		computed: {},
		components: {}
	}
</script>

<style>
	.sheng-box {
		height: 50rpx;
		line-height: 50rpx;
		border: 1rpx solid #CCCCCC;
		padding: 0rpx 10rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		background-color: #FFFFFF;
	}

	.tuanzhang-box {
		width: 710rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		height: 240rpx;
		padding: 20rpx 20rpx 30rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.chooseTuanzhang {
		position: absolute;
		bottom: 100rpx;
		width: 500rpx;
		height: 80rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		background-color: #29EAC4;
		border-radius: 36rpx;
	}
</style>
